<template>
    <div class="myorders">
        <van-search
            v-model="value"
            :placeholder="$st('wp_Enter_your_keywords_to_search')"
            input-align="center"
        />
        <div class="summary">
            <div
                v-for="item in summaryItems"
                :key="item.message"
                class="item"
                :class="{active: item.message === activeItem}"
                @click="itemSelected(item.message)">
                <span class="count">{{ item.count }}</span>
                <span class="name">{{ item.message }}</span>
            </div>
        </div>
        <van-tabs v-model:active="active">
            <van-tab
                v-for="item in tabItems"
                :key="item.name"
                :title="item.name">
                {{ item.name }}
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import { ref } from 'vue';
import { selfI18n } from '@/i18n';
export default {
    name: 'MyOrders',
    setup () {
        const $st = selfI18n;
        const summaryItems = ref([
            { message: $st('wp_Processed_RR_totally'), count: 255 },
            { message: $st('wp_Processed_RR_today'), count: 5 },
            { message: $st('wp_Processed_RR_this_week'), count: 5 },
            { message: $st('wp_Processed_RR_this_month'), count: 5 }
        ]);
        const activeItem = ref($st('wp_Processed_RR_this_week'));
        const itemSelected = (item) => {
            activeItem.value = item;
        };
        const tabItems = ref([
            { name: $st('wp_All'), para: 'All' },
            { name: $st('wp_Dispatch'), para: 'dispatch' },
            { name: $st('wp_Transfer'), para: 'reassign' },
            { name: $st('wp_Record'), para: 'repair' },
            { name: $st('wp_Share'), para: 'share' },
            { name: $st('wp_Evaluation'), para: 'reting' }
        ]);
        return {
            summaryItems,
            activeItem,
            tabItems,
            itemSelected
        };
    }
};
</script>
<style lang="scss" scoped>
.myorders{
    background-color: #f8f8f8;
    .van-search{
        background: #ededed;
        box-shadow: 0px 1px 0px 0px #dddddd;
        :deep(.van-search__content){
            background: #ffffff;
        }
    }
    .summary{
        margin: 15px;
        height: 60px;
        background: #ededed;
        border-radius: 12px;
        display: flex;
        justify-content: space-around;
        overflow: auto;
        .item{
            padding: 16px 0 15px 0;
            flex: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .count{
                font-size: 20px;
            }
            .name{
                font-size: 13px;
                color: rgba(0,0,0,0.60);
            }
            &:active{
                background-color: var(--van-cell-active-color);
            }
            &.active{
                color: white;
                background: #1890ff;
                .name{
                color: white;
            }
            }
        }
    }
}
</style>
